<template>
    <div class="card-view">
      <el-card
      :shadow="shadow"
      :class="['card']"
      :body-style="bodyStyle">
        <div slot="header" class="clearfix">
          <div class="title" :style="{backgroundColor: titlesBgColor}">
            <svg-icon :icon-class="iconClass" v-show="iconClass" className='icon'></svg-icon>
            <template v-for="(item, index) in titles">
              <span :key="index" @click="cardTitleClick(item)" :class="[item.isActive ? 'is-active' : '']">{{$t(item.label)}}</span>
              <el-divider direction="vertical" v-if="(titles.length !== index+1)" :key="index"></el-divider>
            </template>
          </div>
          <el-divider></el-divider>
        </div>
        <slot></slot>
      </el-card>
    </div>
</template>
<script>
export default {
  /**
   * 具有统一自定义样式Card
   */
  name: 'Card',
  props: {
    // 设置阴影显示时机
    shadow: {
      type: String,
      default: 'never'
    },
    // 标题
    titles: {
      type: Array,
      default: () => {return []}
    },
    // 设置头部额外的显示，可能需要slot来做更有扩展性
    extra: {
      type: String,
      default: ''
    },
    // 设置 body 的样式 原生body-style
    bodyStyle: {
      type: Object,
      default: () => ({padding: '20px'})
    },
    // 标题背景颜色 默认#fff
    titlesBgColor: {
      type: String,
      default: '#fff'
    },
    // 标题icon 必须是svg格式
    iconClass : {
      type: String,
      default: null
    }
  },
  data () {
    return {
    }
  },
  created () {
  },
  methods: {
    cardTitleClick (item) {
      this.$emit('card-title-click', item)
    }
  },
  watch: {
  }
}
</script>
<style lang="scss">
.card-view {
  .card {
    border: 0px solid $--border_color;
    border-radius: 25px 0px 0px 0px;
    .el-card__header {
      border-bottom: 0px solid $--border_color;
      padding: 0px 0px;
      .el-divider--horizontal {
        margin: 0px 0px 0px 18px;
      }
      .clearfix {
        .title {
          color: $--color_white;
          display: inline-block;
          padding-left: 5px;
          border-top: 1px solid $--border_color;
          border-right: 1px solid $--border_color;
          border-left: 1px solid $--border_color;
          border-bottom: 0px solid $--border_color;
          border-radius: 25px 25px 0px 25px;
          &:hover {
            cursor: pointer;
            background-color: $--color_info !important;
          }
          .icon {
            vertical-align: middle;
            font-size: 25px;
          }
          span {
            display: inline-block;
            height: 40px;
            line-height: 40px;
            padding: 0px 10px;
          }
        }
      }
    }
  }
}
</style>
